import { useState } from "react";
import { Layout, Space } from 'antd';
const { Header, Footer, Sider, Content } = Layout;
import './index.scss';
export default function Home(){
  let [count, setCount] = useState(0)
  const headerStyle = {
    textAlign: 'center',
    color: '#fff',
    height: 64,
    paddingInline: 50,
    lineHeight: '64px',
    backgroundColor: '#7dbcea',
  };
  const contentStyle = {
    textAlign: 'center',
    minHeight: 120,
    lineHeight: '120px',
    color: '#fff',
    backgroundColor: '#108ee9',
  };
  const siderStyle = {
    textAlign: 'center',
    lineHeight: '120px',
    color: '#fff',
    backgroundColor: '#3ba0e9',
  };
  const footerStyle = {
    textAlign: 'center',
    color: '#fff',
    backgroundColor: '#7dbcea',
  };
  return (
    <div className="home">
       <Layout>
        <Header style={headerStyle}>Header</Header>
        <Layout hasSider>
            <Content style={contentStyle}>Content</Content>
            <Sider style={siderStyle}>Sider</Sider>
        </Layout>
        <Footer style={footerStyle}>Footer</Footer>
        </Layout>
    </div>
  )
}